<template>
  <view class="info-box" :style="{ height: windowHeight - 120 + 'px' }" @touchmove="handletouchmove($event, item)"
      @touchstart="handletouchstart">
      <!-- <view class="info-box"> -->
            <image
                class="popupClose"
                @click="close"
                :data-spmCntSuffix="'.opTop@1.close@'"
                :data-custom="1"
                :data-spm="{'pos': 'close'}"
                src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/close_gray.png"
            />
            <view class="pop-top">
                <view :style="{ position: 'relative' }">
                    <view class="pop-title">
                        <view> 预订须知 </view>
                    </view>
                </view>
                <view class="pop-info-title" v-if="popTitle">
                    {{ popTitle }}
                </view>
                <!-- <view style="height: 45px"></view> -->
            </view>
            <view class="margin-box">
                <view class="list-tab-box">
                  <view class="list-tab" v-for="(item, index) in listData" :key="index" @click="tabClick(index)"
                    :data-spmCntSuffix="'.listTab@1.tabClick@'"
                    :data-custom="index"
                    :data-spm="item">
                      <view class="tab-name" :class="{ active: index == tabIndex }">
                          {{ item.name }}
                      </view>
                      <image
                        v-if="index == tabIndex"
                        class="tab-border"
                        src="../../../../static/ai/icon/tab_icon.png"
                        mode="scaleToFill"
                      />
                      <view class="tab-border" v-else></view>
                  </view>
                </view>
                <scroll-view class="container" :style="{ height: windowHeight - 120 - 150 - 120 + 'px' }" style="position: relative" scroll-y
                    :scrollIntoView="intoView">
                  <view class="scroll-view notice-content" id="intoView1">
                            <view class="notice-title">预订规则</view>
                            <view class="content-box">
                                <view class="content-view">
                                    <view class="tag-box" v-if="instructionsData.cancellationTypeValue">{{instructionsData.cancellationTypeValue}}</view>
                                    <view style="flex: 1" v-if="cancellation && cancellation.cancellationItemDTOList.length > 0">
                                        <view
                                            class="content-text"
                                            v-for="(item, index) in cancellation.cancellationItemDTOList"
                                            :key="index"
                                        >
                                            {{item.cancellationTime}}
                                        </view>
                                    </view>
                                </view>
                                <view class="content-view">
                                    <view class="tag-box" v-if="buyTimeBeforeDTO.typeName">{{buyTimeBeforeDTO.typeName}}</view>
                                    <view class="content-text">{{buyTimeBeforeDTO.value}}</view>
                                </view>
                            </view>
                  </view>

                  <view class="scroll-view notice-content" id="intoView2" v-if="instructionsForUse && instructionsForUse.length > 0">
                        <view class="notice-title">使用说明</view>
                        <block v-for="(item, index) in instructionsForUse" :key="index">
                            <view class="content-box margin" v-if="item.firstLevelTitle == '费用包含' || item.firstLevelTitle == '费用不含'">
                                <view class="content-title">{{item.firstLevelTitle}}：</view>
                                <view class="content-table">
                                    <view class="content-table-box" v-for="(content, index) in item.content" :key="index">
                                        <view class="title">{{content.title}}</view>
                                        <view class="content">{{content.text}}</view>
                                    </view>
                                </view>
                            </view>
                            <view class="content-box margin" v-if="item.firstLevelTitle != '费用包含' && item.firstLevelTitle != '费用不含' && item.firstLevelTitle != '产品特色'">
                                <view class="content-title" :style="item.firstLevelTitle == '出游详情' ? 'padding-bottom: 20rpx' : ''" v-if="item.firstLevelTitle">{{item.firstLevelTitle}}</view>
                                <view class="content-item-box" v-for="(content, index) in item.content" :key="index">
                                    <view class="content-sm-title" v-if="item.firstLevelTitle != '出游详情'">{{content.title}}</view>
                                    <text class="content-text">
                                        {{content.text}}
                                    </text>
                                </view>
                            </view>
                        </block>
                  </view>
                  <view class="scroll-view notice-content active" id="intoView3" v-if="instructionsData.appContent.length > 0">
                    <view class="notice-title">商品详情</view>
                    <view class="notice-txt">
                      <view
                        v-for="(item, index) in instructionsData.appContent"
                        :key="'content' + index"
                        style="font-size: 0"
                      >
                        <rich-text :nodes="item"></rich-text>
                      </view>
                    </view>
                  </view>
                </scroll-view>
                <view class="buy-btn" v-if="!showBuy" >
                    <view class="view-btn" @click="buyClick">立即预订</view>
                    <view :style="{ height: safeBottom - 14 + 'px' }"></view>
                </view>
            </view>
      <!-- </view> -->
  </view>
</template>

<script>
  const globalData = uni.getStorageSync("globalData");
let observer;
export default {
  props: {
    instructionsData: {
      type: Object,
      default: () => {}
    },
    paramsData: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  computed: {
    cancellation: {
        get() {
            let data = this.instructionsData?.cancellation;
            return data;
        },
    },
    instructionsForUse: {
        get() {
            let data = this.instructionsData?.instructionsForUseDTOS
            return data;
        },
    },
    restriction: {
        get() {
            let data = this.instructionsData?.restriction
                ? JSON.parse(this.instructionsData?.restriction)
                : "";
            return data;
        },
    },
    buyTimeBeforeDTO: {
        get() {
            let data = this.instructionsData?.buyTimeBeforeDTO;
            return data;
        },
    },
    popTitle: {
        get() {
            let title = this.instructionsData?.productName
            return title
        }
    },
    listData: {
      get() {
        let arr = [];
        let instructionsForUseDTOS =
          this.instructionsData?.instructionsForUseDTOS?.length > 0;
        let cancellation = this.instructionsData?.cancellation;
        let appContent = this.instructionsData?.appContent?.length > 0;
        if (cancellation) {
          arr.push({
            name: "预订规则",
            id: 'intoView1',
            intoId: 'intoView1',
          });
        }
        if (instructionsForUseDTOS) {
          arr.push({
            id: 'intoView2',
            intoId: 'intoView2',
            name: "使用说明",
          });
        }
        if (appContent) {
          arr.push({
            id: 'intoView3',
            intoId: 'intoView3',
            name: "商品详情",
          });
        }
        return arr;
      },
    },
    showBuy() {
      let obj = this.paramsData
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          return false;
        }
      }
      return true;
    },
  },
  data() {
      return {
          safeBottom: globalData.safeBottom || 0,
          // listData: [
          //     {
          //       id: 'intoView1',
          //       intoId: 'intoView1',
          //       name: "预订规则",
          //     },
          //     {
          //       id: 'intoView2',
          //       intoId: 'intoView2',
          //       name: "使用说明",
          //     },
          //     // {
          //     //     name: "优待政策",
          //     // },
          // ],
          tabIndex: 0,
          intoView: "",
          isClosed: false,
          windowHeight: 0,
          navHeight: 0,
          navTop: 0,
          statusBarHeight: 0,
          categoriesOnScreen: new Set(),
      };
  },
  onLoad() { },
  mounted() {
    setTimeout(() => {
      this.creatObseerver();
    }, 1000);
  },
  methods: {
    leftIndexOfId(id) {
      for (let i = 0; i < this.listData.length; i++) {
        const item = this.listData[i];
        if (item.id === id) {
          return i;
        }
      }
    },
    creatObseerver() {
      console.log("添加监控");
      if (observer) {
        observer.disconnect();
        observer = undefined;
      }
      observer = uni
        .createIntersectionObserver(this, {
          observeAll: true,
          thresholds: [0, 0.001],
        })
        .relativeTo(".container", { top: -87 })
        .observe(".scroll-view", (res) => {
          const { intersectionRatio, id } = res;
          const categoryTabIndex = this.leftIndexOfId(id);
          if (intersectionRatio > 0) {
            this.categoriesOnScreen.add(categoryTabIndex);
          } else {
            this.categoriesOnScreen.delete(categoryTabIndex);
          }
          // categoriesOnScreen保存的是右边显示的所有类目的下标，其中最小的下标就应该是左边选中的下标
          let min = Math.min(...this.categoriesOnScreen);
        //   console.log("监控到变化", min, res, isFinite(min));
          if (!isFinite(min)) {
            min = 0;
          }
          this.tabIndex = min;
        });
    },
      init() {
          this.setData({
              statusBarHeight: globalData.statusBarHeight || 40,
              navHeight: globalData.navHeight || 40,
              navTop: globalData.navTop || 20,
          });
          this.getClineHeight()
          this.creatObseerver();
      },
      getBarHeight() {
          const res = uni.getSystemInfoSync();
          return res.statusBarHeight
      },
      //获取可视区域高度
      getClineHeight() {
          const res = uni.getSystemInfo({
              success: (res) => {
                  this.windowHeight = res.windowHeight
              },
          });
      },
      handletouchmove(event) {
          if (this.isClosed === true) return
          let currentX = event.changedTouches[0].pageX;
          let tx = currentX - this.lastX;
          if (tx > 10) {
            //   this.close()
          }
      },
      handletouchstart(event) {
          //滑动开始
          this.lastX = event.changedTouches[0].pageX;
      },
      close() {
          this.isClosed = true
          this.tabIndex = 0
          this.intoView = `intoView1`
          this.$emit("closePop")
          this.isClosed = false
      },
        tabClick(index) {
          this.tabIndex = index;
          this.intoView = `intoView${index + 1}`;
          if (index === 1) {
            return
          }
          setTimeout(() => {
            this.creatObseerver();
          }, 200);
        },
      buyClick() {
        let data = this.paramsData;
        this.$emit("closePop");
        this.$emit("buyFun", data);
      },
  },
};
</script>

<style lang="scss" scoped>
.pop-top {
  width: 100%;
  min-height: 217rpx;
  background: #ffffff;
  // position: sticky;
  // top: 0;
  z-index: 2;
  border-radius: 48rpx 48rpx 0 0;
  .pop-title {
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      font-size: 32rpx;
      color: #131328;
      width: 100%;
      padding-top: 50rpx;

      .close {
          position: absolute;
          width: 50rpx;
          height: 50rpx;
          left: 28rpx;
          bottom: -10rpx;
      }
  }

  .pop-info-title {
    margin: 0 28rpx;
      padding: 60rpx 0 39rpx 0;
      font-size: 36rpx;
      color: #131328;
      font-weight: 700;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      /* 这里是超出几行省略 */
      overflow: hidden;
      border-bottom: 1rpx solid #EEEEEE;
  }
}

.info-box {
    position: relative;
    width: 100%;
    border-radius: 48rpx 48rpx 0 0;
    margin-top: -30rpx;
    background:#F6F6F9;
    z-index: 1;
    .popupClose {
        position: absolute;
        width: 50rpx;
        height: 50rpx;
        top: 40rpx;
        right: 40rpx;
        z-index: 99;
    }
    .margin-box {
        margin: 0 auto;
        padding-bottom: 30rpx;
        display: flex;
        flex-direction: column;
    }
}

.notice-content {
  margin: 40rpx 28rpx;
}
.notice-content.active{
  padding-bottom: 30rpx;
  border: none;
}
.list-tab-box {
  display: flex;
  align-items: center;
  height: 112rpx;
  justify-content: flex-start;
  padding: 0 24rpx 14rpx 24rpx;
  background: #ffffff;
  position: sticky;
  //   top: 250rpx;
  z-index: 3;
//   border-radius: 30rpx 30rpx 0 0;

  .list-tab {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-evenly;
      height: 65rpx;
      margin: 32rpx 72rpx 0 0;

      .tab-name {
          color: #77769A;
          font-size: 32rpx;
      }

      .tab-name.active {
          font-size: 36rpx;
          color: $sl-color-black;
          font-weight: 600;
      }

      .tab-border {
          width: 46rpx;
          height: 14rpx;
          margin-top: 8rpx;
      }
  }
}

.cancel {
  width: 702rpx;
  height: 65rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: $sl-color-grey;
  line-height: 65rpx;
  background: linear-gradient(135deg, #ffe072 0%, #ffffff 100%);
  margin: 20rpx auto 26rpx auto;
  border-radius: 0 0 0 40rpx;
  padding: 0 0 0 40rpx;
}

.use-date {
  font-size: 28rpx;
  color: $sl-color-grey;
  padding-bottom: 24rpx;
}

.explain-box {
  // min-height: 219rpx;
  width: 100%;

  .explain-info {
      display: flex;
      align-items: center;
      padding-bottom: 24rpx;
      flex-wrap: wrap;

      .explain-tag {
          height: 47rpx;
          padding: 0 9rpx;
          background: #fff2ec;
          color: #ff4f01;
          font-size: 24rpx;
          line-height: 47rpx;
      }

      .explain-text {
          font-size: 28rpx;
          color: $sl-color-grey;
          padding: 10rpx;
      }
  }
}

.notice-title {
  color: $sl-color-black;
  font-size: 36rpx;
  font-weight: 600;
  line-height: 52rpx;
  margin-bottom: 22rpx;
}
.content-box {
    padding: 22rpx;
    background: #ffffff;
    border-radius: 26rpx;
    &.margin {
        margin-bottom: 20rpx;
    }
    .content-view {
        display: flex;
        .tag-box {
            display: flex;
            align-items: center;
            justify-content: center;
            // width: 136rpx;
            height: 48rpx;
            border-radius: 4rpx;
            border: 1rpx solid #F2A81E;
            margin-right: 26rpx;
            font-weight: 500;
            font-size: 28rpx;
            color: #F2A81E;
            line-height: 28rpx;
            padding: 0 12rpx;
        }
        .content-text {
            flex: 1;
            font-weight: 400;
            font-size: 28rpx;
            color: #404062;
            line-height: 40rpx;
            letter-spacing: 1rpx;
        }
    }
    .content-view:not(:last-child) {
        margin-bottom: 30rpx;
    }
    .content-title {
        font-weight: 600;
        font-size: 32rpx;
        color: #131328;
        line-height: 46rpx;
        letter-spacing: 1px;
        padding: 12rpx 0 0 0;
    }
    .content-item-box {
        .content-sm-title {
            font-weight: 600;
            font-size: 28rpx;
            color: #404062;
            line-height: 48rpx;
            letter-spacing: 1rpx;
            margin: 24rpx 0;
        }
        .content-text {
            font-weight: 400;
            font-size: 28rpx;
            color: #404062;
            line-height: 48rpx;
            letter-spacing: 1rpx;
            flex: 1;
        }
    }
    .content-table {
        width: 100%;
        border-radius: 10rpx;
        border: 1rpx solid #E4E4F4;
        margin-top: 20rpx;
        .content-table-box {
            display: flex;
            .title {
                width: 188rpx;
                font-weight: 400;
                font-size: 28rpx;
                color: #131328;
                line-height: 40rpx;
                padding: 19rpx 21rpx;
                border-right: 1rpx solid #E4E4F4;
                background: #F6F6F9;
            }
            .content {
                font-weight: 400;
                font-size: 28rpx;
                color: #131328;
                line-height: 40rpx;
                padding: 19rpx 20rpx;
            }
        }
        .content-table-box:not(:last-child) {
            border-bottom: 1rpx solid #E4E4F4;
        }
    }
}

.notice-txt {
  font-weight: 400;
  font-size: 26rpx;
  color: #404040;
}

.int-flex-box {

  .int-flex-box-title {
      color: $sl-color-grey;
      font-size: 28rpx;
      padding: 30rpx 0 0 0;
      font-weight: 600;
  }

  .int-flex-box-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      color: $sl-color-grey;
      padding-top: 10rpx;
      .sItem-box {
          display: flex;
          flex-direction: column;
          .sItem-1{
              font-size: 28rpx;
              color: $sl-color-grey;
              margin-right: 20rpx;
              font-weight: 600;
          }
          .sItem-2 {
              font-size: 28rpx;
              color: $sl-color-grey;
              flex: 1;
          }
      }
  }
}

.label-box {
  width: 100%;
  min-height: 47rpx;
  border: 1rpx solid #979797;
}

.table {
  margin-top: 19rpx;
  border: 1px solid #e5e5e5;
}

.table .tr:not(:last-child) {
  border-bottom: 1rpx solid #e5e5e5;
}

.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.bg-g {
  background: #f6f7f9;
  font-family: PingFang SC;
  font-weight: 500;
}

.th {
  width: 70%;
  justify-content: center;
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  color: #404040;
  font-size: 26rpx;
  flex-direction: column;

  view {
      padding: 5rpx 0;
      border-bottom: 1rpx solid #e5e5e5;
  }

  view:last-child {
      border: none;
  }
}

.th-3 {
  width: 30%;
}

.tr .th:last-child {
  border-left: 1rpx solid #e5e5e5;
}

.scroll-box {
  height: 950rpx;
}

.sale-date {
  font-size: 28rpx;
  color: $sl-color-grey;
  padding: 10rpx 0;
}

.buy-btn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  // height: 160rpx;
  background: #ffffff;
  .view-btn {
    width: 710rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    color: #ffffff;
    font-size: 32rpx;
    background: $sl-color-light-blue;
    margin: 18rpx auto 18rpx;
    border-radius: 60rpx;
  }
}
</style>
